<template>
    <div id="FeedBack">
        <Filters
            block
            :form="searchForm"
            :filterData="filterData"
            @confirm="changePage(1)"
        />
        <div class="container">
            <DataTable
                :tableData="Data"
                :tableColumn="tableColumn"
                :pageConfig="pageConfig"
                @refresh="getList"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component
export default class FeedBack extends Vue {
    searchForm: any = {
        date: [],
        key: '',
        status: '',
        type: ''
    }
    btns: any[] = [
        {
            label: '导出',
            type: '',
            callback: this.exportList
        }
    ]
    get filterData () {
        return {
            date: {
                label: '注册时间',
                type: 'daterange',
                template: {
                    clearable: true
                }
            },
            key: {
                label: '用户名/手机号',
                type: 'input',
                template: {
                    placeholder: '搜索用户名/手机号'
                }
            },
            status: {
                label: '状态',
                type: 'select',
                span: 4,
                template: {
                    placeholder: '请选择',
                    clearable: true,
                    options: this.statusList
                }
            },
            type: {
                label: '类型',
                type: 'select',
                span: 4,
                template: {
                    placeholder: '请选择',
                    clearable: true,
                    options: this.typeList
                }
            }
        }
    }
    Data: any[] = []
    tableColumn: any = {
        'userAvatar': {
            label: '用户头像',
            template: {
                type: 'avatar',
                fit: 'cover'
            },
            width: 110
        },
        'userName': {
            label: '用户名'
        },
        'userPhone': {
            label: '手机号'
        },
        'typeValue': {
            label: '反馈类型'
        },
        'status': {
            label: '状态',
            map: ['未处理', '已处理']
        },
        'createTime': {
            label: '反馈时间',
            width: 170
        },
        'operation': {
            label: '操作',
            width: 178,
            template: [
                {
                    tag: 'router-link',
                    text: '详情',
                    path: '/systemManage/feedBack/detail',
                    query: {
                        feedbackId: '',
                        _alias: 'detail'
                    }
                }
            ]
        }
    }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 5,
        onChange: this.changePage
    }
    statusList: any[] = [
        {
            label: '全部',
            value: ''
        },
        {
            label: '未处理',
            value: 0
        },
        {
            label: '已处理',
            value: 1
        }
    ]
    typeList: any[] = [
        {
            label: '全部',
            value: ''
        },
        {
            label: '产品问题',
            value: 'PRODUCT'
        },
        {
            label: '功能问题',
            value: 'FUNCTION'
        },
        {
            label: '体验问题',
            value: 'EXPERIENCE'
        },
        {
            label: '其他问题',
            value: 'OTHER'
        }
    ]

    init () {
        this.getList()
    }
    getSearchForm () {
        let { searchForm } = this;
        let { current, pageSize } = this.pageConfig
        let form = Object.assign({ page: current, size: pageSize }, searchForm);
        let [ startTime, endTime ] = this.$util.formatDate(form.date)
        Object.assign(form, {
            startTime,
            endTime
        });
        delete form.date
        return form;
    }
    getList () {
        let form = this.getSearchForm();
        this.$api.feedbackListFetch(form).then((res: any) => {
            this.Data = res.data.records;
            this.pageConfig.total = res.data.total;
            if (!this.Data.length && this.pageConfig.current > 1) {
                --this.pageConfig.current
                this.getList()
            }
        });
    }
    changePage (val: number) {
        this.pageConfig.current = val;
        this.getList();
    }
    exportList () {

    }
}
</script>

<style lang="scss">
#FeedBack {
}
</style>
